<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
body,p,h2{margin:0; font-size:12px; font-family:"宋体";}
ul{margin:0; padding:0; list-style:none;}
a{text-decoration:none;}
img{border:none; vertical-align:top;}
.box{width:740px; padding:13px 19px 0 6px; background-color:#fdf8f1;}/* 记得减掉padding */
h2{font-size:16px;}
.head{height:23px; line-height:23px; margin-top:6px; border-bottom:2px solid #806f66;}/* 需要给定高度才能加下边框 */
.head a{display:block; width:100px; text-align:center; border-right:1px solid #fff; background-color:#eaddcc; float:left;}
.head a:link,.head a:visited{color:#595959;}
.head a:hover{color:#fff; background:#806f66;}/* IE6下不支持除a标签以外其他元素的伪类,所以让a标签包含li标签 */
/* .message{width:740px;} */
.message li{width:740px; height:120px; border-bottom:1px solid #e3e3e3;}/* 父级一定要全部给定宽度和高度，特别是宽度，一定更要给具体数值，否则无法浮动（或如上方，虽然li会继承父标签的全宽，但是要li里面的元素浮动也必须有重新给li宽和高） */
.message li .pic{display:block; width:50px; padding:16px 0 0 32px; border:3px solid #fdf8f1; float:left;}/* 先设置与背景一样的边框，使得不会因鼠标移上去而使图片下降 */
.message li .pic:hover{border:3px solid #cccccc;}
.text{width:518px; padding:16px 0 0 10px; line-height:20px; display:block; float:left;}
.text .title{font-weight:bold; color:#806f66;}
.text .span1{font-weight:bold; color:#666666;}
.text .number{font-weight:bold; color:#66667b;}
.text a{color:#806f66; text-decoration:underline; font-weight:bold}
.text .span2{color:#b5b4b3; font-weight:bold;}
</style>
</head>
<body>
<div class="box">
  <h2>消息盒子</h2>
  <ul class="head">
    <a href="#"><li>未读</li></a>
    <a href="#"><li>全部</li></a>
    <a href="#"><li>我的成长读</li></a>
    <a href="#"><li>特权活动</li></a>
    <a href="#"><li>系统消息读</li></a>
    <a href="#"><li>其他</li></a>
  </ul>  
  <ul class="message">
    <li>
       <a class="pic" href="#"><img src="img5/pic.jpg" /></a>      <!-- IE6下不支持a标签以外的元素伪类，所以加个a标签 -->
       <p class="text">
         <span class="title">天猫俱乐部：</span><br>
         <span class="span1">天猫达人经验值发放成功</span>&nbsp;&nbsp;您上个月购买天猫商品，总共获得<span class="number">1600</span>点天猫达人经验值，已经发放成功！查看天猫达人经验值请<a href="#">点击这里</a>账户！<br><br>
         <span class="span2">2013年02月04日</span>
       </p>
    </li>
    <li>
       <a class="pic" href="#"><img src="img5/pic.jpg" /></a>
       <p class="text">
         <span class="title">天猫俱乐部：</span><br>
         <span class="span1">天猫达人经验值发放成功</span>&nbsp;&nbsp;您上个月在Tmall.com登陆<span class="number">2</span>次，获得<span class="number">10</span>点天猫达人经验值，已经发放至您的经验账户！<br><br>
         <span class="span2">2013年02月04日</span>
    </li>
    <li>
       <a class="pic" href="#"><img src="img5/pic.jpg" /></a>
       <p class="text">
         <span class="title">天猫俱乐部：</span><br>
         <span class="span1">天猫达人经验值发放成功</span>&nbsp;&nbsp;您上个月购买天猫商品，总共获得<span class="number">509</span>点天猫达人经验值，已经发放成功！成功！查看天猫达人经验值请<a href="#">点击这里</a>账户！<br><br>
         <span class="span2">2013年02月04日</span>
       </p>
    </li>
  </ul>
</div>
</body>
</html>
